<template>
  <div class="card min-h-430px">
    <div class="bg"></div>
    <div class="pt-16px px-20px relative z-1 flex items-center">
      <div class="w-50px h-50px rounded-8px bg-red overflow-hidden">
        <img src="" alt="" class="w-full h-full" />
      </div>
      <div class="flex-1 ml-12px">
        <div class="text-#3477E9 lh-16px text-16px font-700">苏州无限责任有限责任公司</div>
        <div class="mt-12px text-12px text-#757575 lh-12px">民营企业 ｜ 300 - 500人 | 教育培训</div>
      </div>
    </div>
    <div class="w-340px mx-auto mt-13px bg-white rounded-4px relative z-1 pb-20px">
      <div class="group">
        <div class="pt-15px px-12px mt-6px first:mt-0" v-for="item in 3" :key="item">
          <div class="flex items-center">
            <div class="flex-1 mr-6px truncate text-#222 text-14px lh-14px font-700">大数据工程技术人员讲师</div>
            <div class="text-#D20808 text-14px lh-14px">20k - 23k</div>
          </div>
          <div class="mt-10px m--3px flex flex-wrap">
            <div
              class="m-5px max-w-75px truncate bg-#f5f5f5 h-22px lh-22px px-6px text-12px rounded-2px text-#757575 text-center"
              v-for="item in 4"
              :key="item"
            >
              大专及以上大专及以上
            </div>
          </div>
        </div>
      </div>
      <div class=" mt-16px flex justify-center">
        <a class="no-underline text-#3477E9 text-12px cursor-pointer flex items-center">
          <span>查看更多职位</span>
          <span class="i-mdi-chevron-right text-16px"></span>
        </a>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.card {
  box-shadow: 0 1px 10px 0 #d0cbcc80;
  @apply rounded-8px bg-white flex-1 min-w-[30%] overflow-hidden relative;
}

.bg {
  background: url(../../assets/images/home-company-item-bg@2x.png) no-repeat;
  background-size: 100% 100%;
  @apply left-0 top-0 right-0 h-166px absolute;
}
</style>
